{% extends "base.html" %}

{% block title %}服务器列表 - 在线跑批系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>服务器管理</h1>
    <a href="{% url 'server_add' %}" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i>添加服务器
    </a>
</div>

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endfor %}
{% endif %}

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-striped">
                <thead class="table-light">
                    <tr>
                        <th>名称</th>
                        <th>主机名/IP</th>
                        <th>端口</th>
                        <th>用户名</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for server in servers %}
                        <tr>
                            <td>{{ server.name }}</td>
                            <td>{{ server.hostname }}</td>
                            <td>{{ server.port }}</td>
                            <td>{{ server.username }}</td>
                            <td>{{ server.created_at|date:"Y-m-d H:i" }}</td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <button class="btn btn-outline-info test-connection-btn" data-server-id="{{ server.id }}">
                                        <i class="fas fa-plug"></i> 测试连接
                                    </button>
                                    <a href="{% url 'server_edit' server.id %}" class="btn btn-outline-primary">
                                        <i class="fas fa-edit"></i> 编辑
                                    </a>
                                    <a href="{% url 'server_delete' server.id %}" class="btn btn-outline-danger delete-btn" data-item-name="服务器 {{ server.name }}">
                                        <i class="fas fa-trash"></i> 删除
                                    </a>
                                </div>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="6" class="text-center text-muted py-3">
                                <p class="mb-0">暂无服务器数据</p>
                                <a href="{% url 'server_add' %}" class="btn btn-sm btn-primary mt-2">添加第一个服务器</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}
